<template>
  <div class="banner" @click.self.stop="boom()">
    <div class="container">
      <div class="banner-inner">
        <h2 class="title">迎接更精彩的绽放</h2>
        <p class="desc">来社区，共同成长！</p>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Banner",
  data() {
    return {
      //限制放的次数
      count: 0
    }
  },
  methods: {
    boom(){
      this.count = 0;
      //放烟花
      if (process.browser) {
        let self = this;

        function render() {
          let width = self.$el.clientWidth;
          let height = self.$el.clientHeight;
          let x = self.getRandom(0, width);
          let y = self.getRandom(0, height);
          self.$emit('boom', {x: x, y: y});
        }

        //设置一秒钟最多20次

        function loop() {
          if(self.count++ > 100) {
            return;
          }
          render();
          setTimeout(() => {
            requestAnimationFrame(loop)
          }, 500);
        }

        loop();

      }
    },
    getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  }
}
</script>

<style scoped>
.banner {
  background-image: url("~/static/img/bg.png");
  color: var(--color);
  background-color: var(--bg-primary);
  background-repeat: repeat-x;
  background-size: cover;
  padding: 80px 0 0;
  height: 272px;
}

.banner-inner {

}

.title {
  font-size: 46px;
  margin-bottom: 29px;
  color: inherit;
}

.desc {
  font-size: 24px;
}
</style>
